<script lang="ts" setup>
import { OrderStatus } from '@/constants/orders';
import { RouteMap, useRouter } from '@/router';
import type { OrderDetails } from '@/types/order';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';
import * as OrdersService from '../../api/orders';
import DetailsBookerInfo from './components/details-booker-info.vue';
import DetailsCancelledExtra from './components/details-cancelled-extra.vue';
import DetailsCheckInOut from './components/details-check-in-out.vue';
import DetailsFooter from './components/details-footer.vue';
import DetailsHotelInfo from './components/details-hotel-info.vue';
import DetailsOtherInfo from './components/details-other-info.vue';
import DetailsRoomsInfo from './components/details-rooms-info.vue';
import DetailsStatusCancelled from './components/details-status-cancelled.vue';
import DetailsStatusPaid from './components/details-status-paid.vue';
import DetailsStatusUnpaid from './components/details-status-unpaid.vue';
import { useLocale } from '@/locale/locale';
import { isWechat } from '@/utils/platform';

const { t } = useLocale();
const router = useRouter();
const data = ref<OrderDetails>();
const initialized = ref(false);

async function fetchDetails(orderSn: string) {
  const res = await OrdersService.getOrderDetail(orderSn);
  data.value = res.data;
}

onLoad(async (options) => {
  await fetchDetails(options!.orderSn);
  initialized.value = true;
});

onShow(() => {
  if (initialized.value) {
    fetchDetails(data.value!.orderSn);
  }
});

const checkInGuideRef = ref();

function handleOpenCheckInGuide() {
  checkInGuideRef.value.open();
}

async function handleCommand(type: string) {
  switch (type) {
    case 'CANCEL_ORDER':
      await OrdersService.cancelUnpaidOrder(data.value?.orderSn!);
      fetchDetails(data.value?.orderSn!);
      break;
    case 'PAY_ORDER':
      router.to(RouteMap.payment, {
        id: data.value?.orderSn,
        amount: data.value?.PayInfo.ThirdPay.amount,
        createTime: data.value?.createOrderTime,
        countdown: Math.abs(data.value?.countdown!),
        from: 'checkout',
        isFromOrder: true
      });
      break;
    case 'CANCEL_BOOKING':
      router.to(RouteMap.orderRefundDetails, {
        status: data.value?.PayInfo.refundStatus,
        orderSn: data.value?.orderSn
      });
      break;
    case 'VIEW_TRIP':
      router.to(RouteMap.tripDetails, {
        id: data.value?.orderSn
      });
      break;
    case 'REORDER':
      router.to(RouteMap.home);
      break;
  }
}
</script>

<template>
  <view class="order-details__wrapper">
    <uni-nav-bar
      v-if="isWechat()"
      :border="false"
      :title="t('LOKey_orderDetail')"
      background-color="#269c74"
      color="#fff"
      fixed
      left-icon="left"
      status-bar
      @click-left="router.back"
    />

    <view class="order-details__header">
      <!-- wait -->
      <details-status-unpaid
        v-if="data?.PayInfo.orderStatus === OrderStatus.WAIT_PAY"
        :amount="data?.PayInfo.ThirdPay.amount"
        :countdown="data?.countdown"
        :required-book="data?.Property.requiredBook"
        @open-check-in-guide="handleOpenCheckInGuide"
      />
      <!-- success -->
      <details-status-paid
        v-else-if="data?.PayInfo.orderStatus === OrderStatus.HAVE_PAID"
        :cannel-rate="data?.refundDetail?.cancelRate"
        :start-date="data?.OrderDate.startDate"
        :required-book="data?.Property.requiredBook"
        @open-check-in-guide="handleOpenCheckInGuide"
      />
      <!-- fail -->
      <details-status-cancelled v-else />
    </view>

    <view class="order-details__body">
      <details-cancelled-extra
        v-if="data?.PayInfo.orderStatus === OrderStatus.CANCEL"
        :id="data?.id"
        :amount="data?.PayInfo.allAmount"
        :charges="data?.RatePlans[0].charges"
        :order-no="data?.orderSn"
        :refund-status="data?.PayInfo.refundStatus"
      />

      <details-hotel-info
        :address="data?.Property.address"
        :cover="data?.Property.cover"
        :name="data?.Property.name"
      />

      <details-check-in-out
        :check-in-date="data?.OrderDate.startDate"
        :check-out-date="data?.OrderDate.endDate"
        :total-days="data?.OrderDate.days"
      />

      <details-rooms-info :items="data?.RatePlans" />

      <details-booker-info
        :country-prefix="data?.User.phoneArea"
        :email="data?.User.mail"
        :full-name="data?.User.fullName"
        :phone-number="data?.User.phone"
      />

      <details-other-info
        :actual-amount="data?.PayInfo.ThirdPay.amount"
        :balance-amount="data?.PayInfo.Balance.amount"
        :cancellation-fee="data?.refundDetail?.cancelFee ?? 0"
        :coupon-amount="data?.PayInfo.Coupon.amount"
        :created-at="data?.createOrderTime"
        :order-no="data?.orderSn"
        :order-status="data?.PayInfo.orderStatus"
        :refund-amount="data?.refundDetail?.refundFee ?? 0"
        :refund-status="data?.PayInfo.refundStatus"
        :total-amount="data?.PayInfo.allAmount"
        :days="data?.OrderDate.days"
      />

      <view class="h-10"></view>
    </view>

    <details-footer
      :order-sn="data?.orderSn"
      :order-status="data?.PayInfo.orderStatus"
      @command="handleCommand"
    />

    <apt-check-in-guide ref="checkInGuideRef" :content="data?.Property.requiredBook" />
  </view>
</template>

<style lang="scss">
.order-details__wrapper {
  background-color: #269c74;
  min-height: 100vh;
}

.order-details__header {
  padding: 24rpx 32rpx;
}

.order-details__body {
  background-color: #f4f4f4;
  border-radius: 20rpx 20rpx 0 0;
  padding-bottom: 48rpx;
}
</style>
